<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">
      <!-- 头部 -->
      <div class="JNPF-common-page-header">
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-huiyuan box-icon "></i></div>
            <div class="icon-header-text">累计会员（个）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.vipInfo}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-gongyingfabu box-icon "></i></div>
            <div class="icon-header-text">供应发布量</div>
          </div>
          <div class="headerBox-bottom">{{headerData.supply}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-green"><i class="iconfont zgyf-icon-xuqiufabu box-icon "></i></div>
            <div class="icon-header-text">需求发布量</div>
          </div>
          <div class="headerBox-bottom">{{headerData.demand}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-bennianyingshou box-icon "></i></div>
            <div class="icon-header-text">本年应收会费（元）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.membership}}</div>
        </div>
        <div class="headerBox">
          <div class="headerBox-top">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-leijishoufei box-icon "></i></div>
            <div class="icon-header-text">累计收费（元）</div>
          </div>
          <div class="headerBox-bottom">{{headerData.charge}}</div>
        </div>
      </div>
      <!-- 中部 -->
      <div class="JNPF-common-page-main-fast">
        <div class="mainFast-top">
          快捷入口
        </div>
        <div class="mainFast-bottom">
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-green"><i class="iconfont zgyf-icon-huiyuanliebiao box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/asso/vip/vipInfo')" >会员列表</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-ruhuishenqing box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/vip/sys/enterpriseInfo')">入会申请</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-yonghufankui box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/vip/sys/feedbak')" >用户反馈</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-jidiluru box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('asso/system/baseList')" >基地录入</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-green"><i class="iconfont zgyf-icon-xinxizixun box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/asso/info/list')" >信息资讯</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-green"><i class="iconfont zgyf-icon-xiaoxizhongxin box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/messageRecord')" >消息中心</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-gongxuguanli box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/asso/supply/approve')" >供需管理</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-blue"><i class="iconfont zgyf-icon-huifeiguanli box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/asso/vip/vipAmount')" >会费管理</el-button></div>
          </div>
          <div class="mainFast-bottom-box">
            <div class="icon-header-box icon-orange"><i class="iconfont zgyf-icon-fuwujigou box-icon "></i></div>
            <div class="button"><el-button plain @click="goToLink('/asso/service/list')" >服务机构</el-button></div>
          </div>
        </div>
      </div>
      <!-- 中部 -->
      <div class="JNPF-common-page-main">
        <!-- 待办 -->
        <div class="mainBox-box">
          <div class="mainBox-top">
            <div class="mainBox-top-left">待办</div>
            <div class="mainBox-top-right" @click="goToLink('/workFlow/flowTodo')">全部<i class="icon-ym icon-ym-report-icon-preview-pageNext"></i></div>
          </div>
          <div class="mainBox-bottom">
            <el-table :data="tableData" border style="width: 100%" :height="230">
              <el-table-column prop="fullName" label="消息标题" min-width="120" show-overflow-tooltip />
              <el-table-column prop="message" label="消息内容" min-width="150" show-overflow-tooltip />
              <el-table-column prop="creatorTime" label="消息时间" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.creatorTime | toDate() }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" >
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="goToLink('/workFlow/flowTodo')">操作</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 消息通知 -->
        <div class="mainBox-box">
          <div class="mainBox-top">
            <div class="mainBox-top-left">通知消息</div>
            <div class="mainBox-top-right" @click="goToLink('/messageRecord')">全部<i class="icon-ym icon-ym-report-icon-preview-pageNext"></i></div>
          </div>
          <div class="mainBox-bottom">
            <el-table :data="tableData1" border style="width: 100%" :height="230">
              <el-table-column prop="title" label="消息标题" width="180" show-overflow-tooltip />
              <el-table-column prop="description" label="消息内容" min-width="200" show-overflow-tooltip />
              <el-table-column prop="releaseTime" label="消息时间" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.releaseTime | toDate() }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 尾部 -->
      <div class="JNPF-common-page-footer">
        <div class="footerBox-left">
          <!-- 销售数据 -->
          <div class="footerBox-top">
            <div class="footerBox-top-title">
              <div class="left">销售数据</div>
              <div class="right">
                <div class="box" :class="saleActive == 0 ? 'active' : ''" @click="saleClick(0)">近7天</div>
                <div class="hr"></div>
                <div class="box" :class="saleActive == 1 ? 'active' : ''" @click="saleClick(1)">近15天</div>
                <div class="hr"></div>
                <div class="box" :class="saleActive == 2 ? 'active' : ''" @click="saleClick(2)">近30天</div>
              </div>
            </div>
            <div class="footerBox-top-bottom">
              <div class="footerBox-top-bottom-box">
                <div class="footerBox-top-bottom-box-num">{{saleData.vipInfo}}</div>
                <div class="footerBox-top-bottom-box-text">新增会员</div>
              </div>
              <div class="footerBox-top-bottom-box">
                <div class="footerBox-top-bottom-box-num">{{saleData.amount}}</div>
                <div class="footerBox-top-bottom-box-text">新增会费</div>
              </div>
              <div class="footerBox-top-bottom-box">
                <div class="footerBox-top-bottom-box-num">{{saleData.userInfo}}</div>
                <div class="footerBox-top-bottom-box-text">新增访客</div>
              </div>
              <div class="footerBox-top-bottom-box">
                <div class="footerBox-top-bottom-box-num">{{saleData.supplyInfo}}</div>
                <div class="footerBox-top-bottom-box-text">新增供需</div>
              </div>
            </div>
          </div>
          <!-- 平台活跃度 -->
          <div class="footerBox-top mb0">
            <div class="footerBox-top-title">
              <div class="left">平台活跃度</div>
              <div class="right">
                <div class="box" :class="activityActive == 0 ? 'active' : ''" @click="activityClick(0)">近7天</div>
                <div class="hr"></div>
                <div class="box" :class="activityActive == 1 ? 'active' : ''" @click="activityClick(1)">近15天</div>
                <div class="hr"></div>
                <div class="box" :class="activityActive == 2 ? 'active' : ''" @click="activityClick(2)">近30天</div>
              </div>
            </div>
            <div class="line-chart">
              <line-chart ref="lineChart" />
            </div>
          </div>
        </div>
        <div class="footerBox-right">
          <div class="footerBox-right-top">产品数据</div>
          <div class="product-box">
            <div class="box" v-for="(item, index) in productData" :key="index">
              <div class="seq">{{index + 1}}</div>
              <div class="left">
                <div class="h">{{item.vipName}}</div>
                <div class="em" :class="item.amountState == 1? '' : 'owe'">会费状态：<span>{{item.amountState == 1 ? '已缴费' : '已欠费'}}</span></div>
              </div>
              <div class="right">发布信息<span>{{item.supplyCount}}条</span></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  import CountTo from 'vue-count-to'
  import { getDataReport, getAccountSupply, getMemberShipDuesOfThisYear, getAccumulatedCharges, getPlatformActivity, getVipRanking } from '@/api/home'
  import { FlowBeforeList } from '@/api/workFlow/FlowBefore'
  import { getMessageList } from '@/api/system/message'
  export default {
    components: {
      PanelGroup,
      LineChart,
      CountTo
    },
      data() {
        return {
          tableData1: [],
          tableData: [],
          listQuery: {
            currentPage: 1,
            pageSize: 4,
            sort: 'desc',
          },
          saleActive: 0,
          headerData: {
            vipInfo: 0,
            supply: 0,
            demand: 0,
            membership: 0,
            charge: 0
          },
          saleData: {
            amount: 0,
            supplyInfo: 0,
            userInfo: 0,
            vipInfo: 0
          },
          lineChart: {},
          activityActive: 0,
          productData: []
        }
      },
      created() {
        // 累计会员
        this.getDataReport(0)
        // 供应发布量
        this.getAccountSupply(0)
        // 需求发布量
        this.getAccountSupply(1)
        // 本年应收会费
        this.getMemberShipDuesOfThisYear()
        // 累计收费
        this.getAccumulatedCharges()
        // 待办
        this.FlowBeforeList(1)
        // 通知消息
        this.getMessageList()

        // 数据简报
        this.getDataReport(7)
        // 平台活跃度
        this.getPlatformActivity(7)
        // 会员排名
        this.getVipRanking()
      },
      methods:{
        goToLink(url) {
          this.$router.push(url)
        },
        getDataReport(id) {
          getDataReport(id).then(res => {
            if (res.code === 200) {
              console.log(res.data)
              if (id === 0) {
                this.headerData.vipInfo = res.data.vipInfo
              } else {
                this.saleData = res.data
              }
            }
          })
        },
        getAccountSupply(type) {
          const data = {
            supplydemandtype: type
          }
          getAccountSupply(data).then(res => {
            if (res.code === 200) {
              console.log(res.data)
              if (type == 0) {
                this.headerData.supply = res.data
              } else if (type == 1) {
                this.headerData.demand = res.data
              }
            }
          })
        },
        getMemberShipDuesOfThisYear() {
          getMemberShipDuesOfThisYear().then(res => {
            if (res.code === 200) {
              console.log(res.data)
              this.headerData.membership = res.data.receivable
            }
          })
        },
        getAccumulatedCharges() {
          getAccumulatedCharges().then(res => {
            if (res.code === 200) {
              console.log(res.data)
              this.headerData.charge = res.data
            }
          })
        },
        getPlatformActivity(id) {
          getPlatformActivity(id).then(res => {
            if (res.code === 200) {
              console.log(res.data)
              const data = {
                xAxis: [],
                series: []
              }
              res.data.forEach(item => {
                data.xAxis.push(item.currentDate)
                data.series.push(item.activity)
              })
              this.$refs.lineChart.initChart(data)
            }
          })
        },
        getVipRanking() {
          getVipRanking().then(res => {
            if (res.code === 200) {
              console.log(res.data)
              this.productData = res.data
            }
          })
        },
        // 待办
        FlowBeforeList(category) {
          FlowBeforeList(category, this.listQuery).then( res => {
            if(res.data && res.data.list){
              this.tableData = res.data.list
            this.total = res.data.pagination.total
            }
            this.listLoading = false
          })
        },
        // 通知消息
        getMessageList() {
          getMessageList(this.listQuery).then(res =>{
            if(res.data && res.data.list){
              this.tableData1 = res.data.list
            }
            this.listLoading = false
          })
        },
        saleClick(val) {
          this.saleActive = val
          if (val == 0) {
            this.getDataReport(7)
          } else if (val == 1) {
            this.getDataReport(15)
          } else if (val == 2) {
            this.getDataReport(30)
          }
        },
        activityClick(val) {
          this.activityActive = val
          if (val == 0) {
            this.getPlatformActivity(7)
          } else if (val == 1) {
            this.getPlatformActivity(15)
          } else if (val == 2) {
            this.getPlatformActivity(30)
          }
        },
        handleEdit(index, row) {
          console.log(index, row);
        },
      }
    }
</script>
<style scoped lang="scss">
  .JNPF-common-layout{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .JNPF-preview-main{
    width: 100%;
    height: 100%;
    background:#EEEEEE;
    .JNPF-common-page-header{
      display: flex;
      justify-content: space-between;
      width: 100%;
      background: #FFFFFF;
      padding: 0.75rem;
      border-radius: 0.25rem;
      margin-bottom: 0.75rem;
      .headerBox{
        width: calc(20% - 0.75rem);
        background: #FFFFFF;
        border: 1px solid #E7E7E7;
        border-radius: 0.75rem;
        .headerBox-top{
          display: flex;
          align-items: center;
          border-bottom: 1px solid #E7E7E7;
          padding: 1rem;
          .icon-header-box{
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            padding: 16px;
            border-radius: 100%;
            margin-right: 1.125rem;
          }
          .icon-header-text{
            flex: 1;
            font-weight: bold;
            font-size: 1.25rem;
            line-height: 1.75rem;
            color: rgba(0, 0, 0, 0.60);
          }
          .box-icon {
            font-size: 1.5rem;
            color: #ffffff
          }
          .icon-orange {
            background-color:#ED7B2F ;
          }
          .icon-blue {
            background-color: #0052D9;
          }
          .icon-green {
            background-color: #00A870;
          }
        }
        .headerBox-bottom{
          width: 100%;
          padding: 1.5rem 0;
          font-size: 3rem;
          line-height: 3.5rem;
          color: rgba(0, 0, 0, 0.90);
          text-align: center;
        }
      }
    }
    ::v-deep .el-table--border{
      border-bottom: 1px solid #EBEEF5;
    }
    .JNPF-common-page-main-fast{
      width: 100%;
      background: #FFFFFF;
      border-radius: 0.25rem;
      margin-bottom: 0.75rem;
      .mainFast-top{
        width: 100%;
        font-size: 1rem;
        line-height: 24px;
        font-weight: bold;
        color: rgba(0,0,0,0.90);
        border-bottom: 1px solid #E7E7E7;
        padding: 0.75rem;
      }
      .mainFast-bottom{
        width: 100%;
        padding: 1.875rem 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .mainFast-bottom-box{
          width: 11%;
          text-align: center;
          .icon-header-box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin: 0 auto;
          }
          .button{
            margin-top: 1.25rem;
          }
          .box-icon {
            font-size: 1.5rem;
            color: #ffffff
          }
          .icon-orange {
            background-color:#ED7B2F ;
          }
          .icon-blue {
            background-color: #0052D9;
          }
          .icon-green {
            background-color: #00A870;
          }
        }
      }
    }
    .JNPF-common-page-main{
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.75rem;
      .mainBox-box{
        width: calc(50% - 0.375rem);
        height: 100%;
        background: #FFFFFF;
        border-radius: 0.25rem;
        margin-right: 0.75rem;
        &:nth-child(2) {
          margin-right: 0;
        }
        .mainBox-top{
          display: flex;
          align-items: center;
          width: 100%;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: bold;
          color: rgba(0,0,0,0.90);
          border-bottom: 1px solid #E7E7E7;
          padding: 1rem 0.75rem;
          .mainBox-top-left {
            flex: 1;
          }
          .mainBox-top-right {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;
            color: #0052D9;
            i{
              font-size: 0.875rem;
              margin-left: 0.5rem;
            }
          }
        }
        .mainBox-bottom{
          width: 100%;
          padding: 12px;
          display: flex;
        }
      }
    }

    .JNPF-common-page-footer{
      display: flex;
      justify-content: space-between;
      width: 100%;
      .footerBox-left{
        flex: 1;
        margin-right: 0.75rem;
        .footerBox-top{
          width: 100%;
          background: #FFFFFF;
          border-radius: 0.25rem;
          margin-bottom: 0.75rem;
          &.mb0{
            margin-bottom: 0;
          }
          .footerBox-top-title{
            width: 100%;
            padding: 1rem 0.75rem;
            border-bottom: 1px solid #E7E7E7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
              font-size: 1rem;
              line-height: 1.5rem;
              font-weight: bold;
            }
            .right{
              display: flex;
              align-items: center;
              padding: 0.125rem;
              background: #EEEEEE;
              border-radius: 0.25rem;
              .box{
                width: 88px;
                height: 28px;
                font-size: 0.75rem;
                line-height: 28px;
                background: #EEEEEE;
                color: rgba(0,0,0,0.60);
                text-align: center;
                border-radius: 0.25rem;
                cursor: pointer;
              }
              .hr{
                width: 1px;
                height: 0.75rem;
                margin: 0 0.25rem;
                background: rgba(0,0,0,0.26);
              }
              .active{
                background: #0052D9;
                color: #fff;
              }
            }
          }
          .footerBox-top-bottom{
            display: flex;
            justify-content: space-around;
            width: 100%;
            .footerBox-top-bottom-box{
              width: 25%;
              margin: 1rem 0;
              text-align: center;
              .footerBox-top-bottom-box-num{
                font-weight: bold;
                font-size: 2rem;
                color: rgba(0,0,0,0.90);
                line-height: 2.5rem;
              }
              .footerBox-top-bottom-box-text{
                font-size: 0.75rem;
                color: rgba(0,0,0,0.60);
                line-height: 1.25rem;
              }
            }
          }
          .line-chart{
            width: 100%;
            height: 30rem;
          }
        }
      }
      .footerBox-right{
        flex-shrink: 0;
        width: 26.625rem;
        height: 100%;
        background: #FFFFFF;
        border-radius: 0.25rem;
        .footerBox-right-top{
          width: 100%;
          padding: 1.7rem 0.75rem;
          border-bottom: 1px solid #E7E7E7;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: bold;
          color: rgba(0,0,0,0.90);
        }
        .product-box{
          padding: 1rem 0.75rem;
          .box{
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
            .seq{
              width: 2rem;
              height: 2rem;
              line-height: 2rem;
              text-align: center;
              flex-shrink: 0;
              border-radius: 50%;
              background: #C5C5C5;
              color: #fff;
            }
            .left{
              flex: 1;
              margin-left: 0.75rem;
              .h{
                font-size: 0.875rem;
                line-height: 1.375rem;
              }
              .em{
                font-size: 0.75rem;
                line-height: 1.25rem;
                color: rgba(0,0,0,0.40);
                &.owe{
                  span{
                    color: rgba(0,0,0,.6);
                  }
                }
                span{
                  color: #00A870;
                }
              }
            }
            .right{
              flex-shrink: 0;
              color: rgba(0,0,0,0.40);
              font-size: 14px;
              span{
                margin-left: 0.875rem;
                color: #00A870;
              }
            }
            &:nth-child(1){
              .seq{
                background: #E34D59;
              }
            }
            &:nth-child(2){
              .seq{
                background: #ED7B2F;
              }
            }
            &:nth-child(3){
              .seq{
                background: #00A870;
              }
            }
          }
        }
      }
    }
  }

</style>
